import React     from 'react';
import MUntilS   from 'util/mm.jsx'
import  User     from 'service/user-service.jsx'

const _mm = new MUntilS();
const _user = new User();

import './index.scss';
class Login extends React.Component{
    constructor(props){
        super(props);
        this.state={
            username:'',
            password:'',
            redirect:_mm.getUrlParam('redirect') || '/'
        }
    }
    //组件将要加载
    componentWillMount(){
        document.title ='登录 - ZYM REACT';
    }
   //当input发生改变
    onInputChange(e) {
        let inputValue = e.target.value,
            inputName  = e.target.name;
        this.setState({
            [inputName]: inputValue
        });
    }
    //回车
    onInputKeyUp(e){
        if(e.keyCode==13){
            this.onSubmit();
        }
    }
    // 当用户提交表单
    onSubmit(){
        let loginInfo = {
            username:this.state.username,
            password:this.state.password
        },
        checkResult = _user.checkLoginInfo(loginInfo);
        //验证通过
        if(checkResult.status){
            _user.login(loginInfo)
                .then(
                    //成功回掉 resolve
                    (res)=>{
                        _mm.setStorage('userInfo',res);
                        this.props.history.push(this.state.redirect)
                    },
                    //失败回掉  reject
                    (errMsg)=>{
                        _mm.errorTips(errMsg);
                    }
                )
        }
        //不通过（为空）
        else{
            _mm.errorTips(checkResult.msg)
        }

    }
    render(){
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-4 col-md-offset-4">
                        <div className="panel panel-default zym-login-panel">
                            <div className="panel-heading">欢迎登陆 - ZYM REACT 管理系统</div>
                            <div className="panel-body">
                                <div>
                                    <div className="form-group">
                                        <input type="text"
                                               className="form-control"  placeholder="请输入用户名"
                                               name="username"
                                               onKeyUp={e=>{this.onInputKeyUp(e)}}
                                               onChange={e=>this.onInputChange(e)}
                                        />
                                    </div>
                                    <div className="form-group">
                                        <input type="password"
                                               className="form-control"  placeholder="请输入密码"
                                               name="password"
                                               onKeyUp={e=>{this.onInputKeyUp(e)}}
                                               onChange={e=>{this.onInputChange(e)}}
                                        />
                                    </div>
                                    <button className="btn btn-lg btn-block btn-primary"
                                            onClick={e=>{this.onSubmit(e)}}
                                    >登录</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        )
    }
}

export default Login;